<template>
  <div class="reactive">
    <p>object:{{ obj }}</p>
    <button @click="changeobj">++</button>
    <button @click="changecopyobj">*--*</button>
    <br />
  </div>
</template>
<script lang="ts" setup>
import { reactive, readonly } from "vue";
// readonly
// 把对象变为只读 无法修改
let obj = reactive({
  name: "小陈",
  num: 1,
});

let copyobj = readonly(obj);
const changeobj = () => {
  obj.num++;
};
const changecopyobj = () => {
  //set operation on key "num" failed: target is readonly. Proxy {name: '小陈', num: 1}
  // copyobj.num++;
  console.log(copyobj);
};
</script>

<style lang="less" scoped>
div {
  font-size: 20px;
}
</style>
